<template>
	<view style="background-color: #f8f8f8;">

		<!-- <view style="display: flex; flex-direction: row; "> -->
		<view style="background-color: #FF8B02; padding-bottom: 1rpx;">
			<!-- 行 -->
			<u-row style="margin-bottom: 30rpx;">
				<u-col span="2.5">
					<u--image customStyle="margin: 0rpx 0rpx 0rpx 30rpx" src="/static/icon_logo.png" width="100rpx"
						height="100rpx"></u--image>
				</u-col>
				<u-col span="6.5">
					<view style="width: 420rpx;">
						<u-notice-bar :text="this.noticeList"></u-notice-bar>
					</view>
				</u-col>
				<u-col span="1">
					<!-- <u-notice-bar text="asfasf"></u-notice-bar> -->
					<u--image @click="searchClick" customStyle="margin: 0rpx 0rpx 0rpx 30rpx"
						src="/static/icon_search.png" width="50rpx" height="50rpx"></u--image>
				</u-col>
				<u-col span="1.5">
					<!-- <u-notice-bar text="asfasf"></u-notice-bar> -->
					<u--image @click="pageClick('pages/webview/webview','联系客服',4)"
						customStyle="margin: 0rpx 0rpx 0rpx 40rpx" src="/static/icon_msg.png" width="50rpx"
						height="50rpx"></u--image>
				</u-col>
			</u-row>

			<u-row>
				<u-col span="3">
					<view class="centerView">
						<view style="display: flex; flex-direction: column; margin: 20rpx;
						 justify-content: center; align-items: center;" @click="pageClick('pages/webview/webview','平台简介',1)">
							<u--image src="/static/icon_pf_detail.png" width="50rpx" height="50rpx"
								style="margin: 0rpx;"></u--image>
							<u--text color="white" text="平台简介" customStyle="margin: 10px 0px 0px 0px"></u--text>

						</view>
					</view>
				</u-col>

				<u-col span="3">
					<view class="centerView">
						<view
							style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
							@click="pageClick('pages/webview/webview','平台合作',2)">
							<u--image src="/static/icon_parter.png" width="50rpx" height="50rpx"
								style="margin: 0rpx;"></u--image>
							<u--text color="white" text="平台合作" customStyle="margin: 10px 0px 0px 0px"></u--text>

						</view>
					</view>
				</u-col>

				<u-col span="3">
					<view class="centerView">
						<view
							style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
							@click="pageClick('pages/webview/webview','项目操作',3)">
							<u--image src="/static/icon_help.png" width="50rpx" height="50rpx"
								style="margin: 0rpx;"></u--image>
							<u--text color="white" text="项目操作" customStyle="margin: 10px 0px 0px 0px"></u--text>

						</view>
					</view>
				</u-col>

				<u-col span="3">
					<view class="centerView">
						<view
							style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
							@click="pageClick('pages/webview/webview','联系客服',4)">
							<u--image src="/static/icon_service.png" width="50rpx" height="50rpx"
								style="margin: 0rpx;"></u--image>
							<u--text color="white" text="联系客服" customStyle="margin: 10px 0px 0px 0px"></u--text>

						</view>
					</view>
				</u-col>



			</u-row>

		</view>


		<u-list @scrolltolower="scrolltolower">
			<u-swiper :autoplay="true" radius="5" style="margin: 20rpx;" :list="bannerList"></u-swiper>

			<!-- 首页功能 -->
			<view style="margin: 20rpx;background-color: #ffffff">
				<u-row>
					<u-col span="3">
						<view class="centerView">
							<view
								style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
								@click="btnClick('pages/order/order',1)">
								<u--image src="/static/icon_new_register.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="新人专享" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>


					<u-col span="3">
						<view class="centerView">
							<view
								style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
								@click="btnClick('pages/order/order',2)">
								<u--image src="/static/icon_register.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="简单注册" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>

					<u-col span="3">
						<view class="centerView">
							<view style="display: flex; flex-direction: column; margin: 20rpx;
								 justify-content: center; align-items: center;" @click="btnClick('pages/order/order',3)">
								<u--image src="/static/icon_smrz.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="实名认证" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="centerView">
							<view
								style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
								@click="btnClick('pages/order/order',4)">
								<u--image src="/static/icon_test_game.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="试玩市场" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>
				</u-row>

				<u-row>

					<u-col span="3">
						<view class="centerView">
							<view
								style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
								@click="btnClick('pages/order/order',5)">
								<u--image src="/static/icon_game.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="游戏任务" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>


					<u-col span="3">
						<view class="centerView">
							<view
								style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
								@click="btnClick('pages/order/order',6)">
								<u--image src="/static/icon_jd_al.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="京东阿里" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>

					<u-col span="3">
						<view class="centerView">
							<view style="display: flex; flex-direction: column; margin: 20rpx;
								 justify-content: center; align-items: center;" @click="btnClick('pages/order/order',7)">
								<u--image src="/static/icon_ticket.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="证券任务" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="centerView">
							<view
								style="display: flex; flex-direction: column; margin: 10rpx; justify-content: center; align-items: center;"
								@click="btnClick('pages/order/order',8)">
								<u--image src="/static/icon_today.png" width="50rpx" height="50rpx"
									style="margin: 0rpx;"></u--image>
								<u--text text="今日主推" customStyle="margin: 10px 0px 0px 0px"></u--text>

							</view>
						</view>
					</u-col>
				</u-row>
			</view>

			<u--image src="/static/bg_index_promotion.png" width="100vw" height="150rpx"
				style="margin: 0rpx;"></u--image>





			<u-list-item v-for="(item, index) in indexList" :key="index">
				<!-- 					<u-cell title="1111" @click="itemClick(1)">
						<u-avatar slot="icon" shape="square" size="35" customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell> -->

				<view style="margin-top: 20rpx;" class="itemView"
					@click="itemClick(item.id,item.proTitle,item.proContent,item.proMoney)">
					<u-col>
						<!-- 						<u--text color="#07C160" customStyle="margin: 20rpx 0rpx 0rpx 20rpx"
							:text="'任务时间 '+item.cdate"></u--text> -->

						<view style="display: flex; flex-direction: row;">
							<u--image mode="aspectFill" customStyle="margin: 20rpx 0rpx 0rpx 20rpx" :showLoading="true"
								:src="item.proPicture" width="200rpx" height="200rpx"></u--image>

							<view style="display: flex; flex-direction: column; width: 100vw;">
								<u--text :bold="true" color="#111111" customStyle="margin: 20rpx 0rpx 0rpx 20rpx"
									:text="item.proTitle"></u--text>


								<view>
									<u-row>
										<u-col span="6">
											<u-button style="width: 100rpx; height: 45rpx;" type="primary" size="mini"
												text="进行中" color="#69A4D6"
												customStyle="margin: 30rpx 0rpx 0rpx 20rpx"></u-button>
										</u-col>
										<u-col span="6">
											<view>
												<u--text color="red" style="display: inline; float: right;"
													:text="'￥:'+item.proMoney"
													customStyle="margin: 30rpx 10px 0px 5px"></u--text>
											</view>

										</u-col>

									</u-row>

									<u-row>
										<u-col span="8">
											<view style="display: flex; flex-direction: row;">
												<u-button style="width: 150rpx; height: 45rpx;" type="primary"
													size="mini" text="试玩充场" color="#69A4D6"
													customStyle="margin: 30rpx 0rpx 0rpx 20rpx"></u-button>
												<u-button style=" width: 100rpx; height: 45rpx;" type="primary"
													size="mini" text="主推" color="#E58147"
													customStyle="margin: 30rpx 0rpx 0rpx 30rpx"></u-button>
											</view>
										</u-col>


										<u-col span="4">
											<view>
												<u-button
													style="display: inline; float: right; width: 100rpx; height: 45rpx;"
													type="primary" size="mini" text="赏金" color="#D81E06"
													customStyle="margin: 30rpx 20rpx 0rpx 0rpx"></u-button>
											</view>

										</u-col>

									</u-row>
								</view>



							</view>
						</view>
					</u-col>
				</view>
			</u-list-item>
		</u-list>


	</view>
</template>

<script>
	// 导入unotice bar
	import uNoticeBar from "uview-ui/components/u-notice-bar/u-notice-bar.vue";
	// import uWaterfall from "uview-ui/components/u-waterfall/u-waterfall.vue";
	// import uNoticeBar from "uview-ui/components/u-notice-bar/u-notice-bar.vue";
	// import uTag from "uview-ui/components/u-tag/u-tag.vue";
	export default {
		// components: {
		// 	uNoticeBar,
		// 	uTag
		// },
		data() {
			return {
				title: 'Hello',
				bannerList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				indexList: [],
				noticeList: "",
			}
		},
		methods: {
			scrolltolower() {
				// this.loadmore()
			},
			itemClick(id, title, proContent, money) {
				uni.$u.route('pages/order/order_info', {
					proId: id,
					proTitle: title,
					proMoney: money,
				});

				uni.setStorageSync('proContent',JSON.stringify(proContent))
			},
			getProjectList() {
				let param = {
					proType: "",
					pageNum: 1,
					pageSize: 1000,
				}

				// uni.showLoading({
				// 	title: '请求中...'
				// })
				this.$u.api.apiGetProjectList(param).then(res => {
					console.log('apiGetProjectList', res);
					uni.hideLoading();
					if (res.code == 1) {
						this.indexList = res.data.list
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			getNoticeList() {
				let param = {
					pageNum: 1,
					pageSize: 1000,
				}


				this.$u.api.apiGetNoticeList(param).then(res => {
					console.log('apiGetNoticeList', res);
					if (res.code == 1) {
						this.noticeList = res.data.list[0].content
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			searchClick() {
				uni.$u.route('pages/search/search');
			},
			btnClick(route_url, param) {
				console.log(route_url);
				let router = '' + route_url + ''
				console.log(router)

				uni.$u.route(router, {
					proType: param,
				});

			},
			pageClick(route_url, param, type) {
				console.log(route_url);
				let router = '' + route_url + ''
				console.log(router)

				uni.$u.route(router, {
					pageTitle: param,
					pageType: type,
				});

			},
		},
		onLoad(options) {
			let token = uni.getStorageSync('login_token')
			console.log("index onLoad", token)
			if ((token == '' || token == undefined) &&
				(options.login_token == '' || options.login_token == undefined)) {
				uni.$u.route({
					url: 'pages/login/login',
				})
				return
			}


			this.getProjectList()
			this.getNoticeList()

		},
		getProTypeName(proType) {
			// 新人专享 2简单注册 3实名认证
			switch (proType) {
				case 1:
					return "新人专享";
				case 2:
					return "简单注册";
				case 3:
					return "实名认证";
			}
		}
	}
</script>

<style lang="scss">
	// 父布局
	.content {
		display: flex;
		// 布局方向  Andoird中的 orixx
		flex-direction: column;
		// 子view居中
		align-items: center;
		// 居中
		justify-content: center;
	}

	.itemView {
		display: flex;
		flex-direction: column;
		height: 240rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		background-color: white;
	}
</style>